import { useEffect, useState } from 'react';
import PageHeader from '../components/PageHeader';
import { getIssueById } from '../api/issue';
import { useParams } from 'react-router-dom';
import { getUserById } from '../api/user';
import { Avatar } from 'antd';
import dayjs from 'dayjs';

function IssueDetail() {
  const [issueInfo, setIssueInfo] = useState({});
  const [issueUser, setIssueUserName] = useState({});
  const { id } = useParams();
  useEffect(() => {
    async function fetchData() {
      const res = await getIssueById(id);
      setIssueInfo(res.data);

      // 获取 userId 对应的用户
      const result = await getUserById(res.data.userId);
      setIssueUserName(result.data);
    }

    fetchData();
  }, []);

  const formatDate = (date) => {
    return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
  };
  return (
    <>
      <div className="">
        <PageHeader title="问题详情"></PageHeader>
      </div>
      <section className="flex px-10">
        <div className="left w-3/4 px-3">
          <div>
            <h3 className='text-lg'>{issueInfo?.issueTitle}</h3>
            <div className="flex gap-2 border-b border-gray-300 py-2 mb-6">
              <Avatar size="small" src={issueUser?.avatar} />
              <span className="text-yellow-600">{issueUser?.nickname}</span>
              <span>发布于：{formatDate(issueInfo?.issueDate)}</span>
            </div>
          </div>
          <div>
            <div dangerouslySetInnerHTML={{ __html: issueInfo.issueContent }}></div>
          </div>
        </div>
        <div className="right bg-gray-400 grow">right</div>
      </section>
    </>
  );
}

export default IssueDetail;
